<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="Access-Control-Allow-Origin" content="*">
	<meta name="viewport" content="width=device-width, initial-scale=0.8">
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<!-- import CSS -->
	<link rel="stylesheet" href="./element-ui/index.css">
	<!-- import Vue before Element -->
	<script src="./element-ui/vue.js"></script>
	<!-- import JavaScript -->
	<script src="./element-ui/index.js"></script>
	<script src="./jquery-1.11.0.min.js"></script>
	<script src="./lightweight-charts.standalone.production.js"></script>
	<script src="./db.js"></script>
	<script src="./getData.js"></script>
	<script src="./factor.js"></script>
	<script src="./echarts.js"></script>
	<script src="./vue-chart.js"></script>
</head>
<body>
<script type="text/x-template" id="stock-table-template">
	<el-row>
		<el-col v-show="clickRow && more" :span="24">
			<el-form :inline="true" size="mini">
				<el-form-item label="">
					<el-button type="primary" size="mini" @click="clickRow=null">返回列表</el-button>
					<el-button type="primary" size="mini" v-on:click="setUserStock(clickRow, true)">+自选</el-button>
					<el-button type="primary" size="mini" v-on:click="setUserStock(clickRow, false)">-自选</el-button>
				</el-form-item>
			</el-form>
			<slot v-bind:row="clickRow"></slot>
		</el-col>
		<el-col v-show="null == clickRow" :span="24">
			<el-form :inline="true" size="mini">
				<el-form-item label="选择">
					<el-checkbox-group v-model="useColumn">
						<el-checkbox-button v-for="(col,index) in column" :key="index" :label="col">{{getName(col)}}</el-checkbox-button>
					</el-checkbox-group>
				</el-form-item>
			</el-form>
			<el-pagination
					:current-page="currentPage"
					:page-size="10"
					layout="total, prev, pager, next"
					@current-change="currentChange"
					:total="total">
			</el-pagination>
			<el-table :data="currentData" border stripe
					  :size="'mini'" @expand-change="expand" @sort-change="sort"  @row-click="rowClick">
				<el-table-column v-for="(col,index) in useColumn" :key="index" :prop="col" :label="getName(col)" sortable>
				</el-table-column>
			</el-table>
		</el-col>
	</el-row>
</script>
<script>
	//@ sourceMappingURL=stock-table.html
	Vue.component('stock-table', {
		props: ["value", "show", "more", "select"],
		template : '#stock-table-template',
		mounted: function() {
		},
		data: function () {
			return {
				currentPage: 1,
				rawData: this.value,
				currentData: this.value.slice(0, 10),
				selectData: [],
				clickRow: null,
				useColumn: [],
			}
		},
		computed: {
			total : function () {
				if (this.selectData.length > 0) {
					return this.selectData.length;
				} else {
					return this.rawData.length;
				}
			},
			column : function () {
				var out = [];
				var all = getColumn();
				for (var i in all) {
					out.push(all[i]);
				}
				var ret = null == this.show ? out : this.show;
				this.useColumn = ret.slice();
				if (this.$vnode.key) {
					var my = this;
					DB.getTableRow("stock", this.$vnode.key).then(function (col) {
						if (col.value && col.value.length > 0) {
							var arr = [];
							for (var i = 0; i < col.value.length; i++) {
								if (my.column.includes(col.value[i])) {
									arr.push(col.value[i]);
								}
							}
							if (arr.length > 0) {
								Vue.set(my, 'useColumn', arr);
							}
						}
					});
				}
				return ret;
			},
		},
		methods: {
			getName : function (key) {
				return COLUMN_NAME[key] || key;
			},
			expand : function (row) {
				if (typeof this.more == "function") {
					this.more(row);
				}
			},
			setUserStock: function (row, set) {
				if (set) {
					DB.setTableRow("user", row);
				} else {
					DB.deleteTableRow("user", row.id);
				}
			},
			currentChange : function (val) {
				if (null == val) {
					val = this.currentPage || 1;
				}
				this.currentPage = val;
				if (this.selectData.length > 0) {
					Vue.set(this, "currentData", this.selectData.slice(val*10-10, val*10));
				} else {
					Vue.set(this, "currentData", this.rawData.slice(val*10-10, val*10));
				}
			},
			sort: function (cond) {
				var desc = ("descending" == cond.order);

				function f(a, b) {
					var a = a[cond.prop];
					var da = parseFloat(a);
					a = (da == a ? a : da);
					var b = b[cond.prop];
					var db = parseFloat(b);
					b = (db == b ? b : db);
					if (desc) {
						return b > a ? 1 : -1;
					} else {
						return a > b ? 1 : -1;
					}
				}
				this.rawData.sort(f);
				this.currentChange();
			},
			rowClick : function (row, column, event) {
				if (typeof this.more == "function") {
					this.more(row);
					this.clickRow = row;
				}
			}
		},
		watch : {
			value : function (val) {
				this.rawData = val;
				this.currentChange();
			},
			useColumn : function (n) {
				if (this.$vnode.key) {
					DB.setTableRow("stock", {id: this.$vnode.key, value: n});
				}
			},
			select : function (val) {
				if (val && val.length > 0) {
					var arr = [];
					for (var i = 0; i < val.length; i++) {
						arr.push(this.rawData[val[i]]);
					}
					this.selectData = arr;
				} else {
					this.selectData = [];
				}
				this.currentChange();
			}
		}
	});
</script>
<div id="app">
	<el-row>
		<template>
			<el-tabs v-model="listType" size="mini" @tab-click="parse">
				<el-tab-pane label="自选股" name="user"></el-tab-pane>
				<el-tab-pane label="问财探索" name="finder"></el-tab-pane>
				<el-tab-pane label="多维分析" name="parse"></el-tab-pane>
			</el-tabs>
		</template>
		<el-col v-if="listType != 'parse'" :span="24">
			<el-form v-if="listType == 'finder'" :inline="true" size="mini">
				<!--el-form-item label="">
                    <el-select v-model="stockList" filterable allow-create default-first-option>
                        <el-option v-for="(stockKey,index) in baseStockList" :key="index" :label="stockKey" :value="stockKey"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="stockList"></el-input>
                </el-form-item-->
				<el-form-item>
					<el-autocomplete class="inline-input" v-model="stockList" style="width:360px;"
									 :fetch-suggestions="queryStockList" placeholder="请输入问财条件">
					</el-autocomplete>
				</el-form-item>
				<el-form-item label="股票数">
					<span>{{listLength}}</span>
				</el-form-item>
			</el-form>
			<el-form :inline="true" size="mini">
				<el-form-item label="">
					<el-select v-model="period" style="width:80px;">
						<el-option label="日" value="101"></el-option>
						<el-option label="60分" value="60"></el-option>
						<el-option label="15分" value="15"></el-option>
						<el-option label="5分" value="5"></el-option>
						<el-option label="1分" value="1"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="">
					<el-select v-model="dataLimit" style="width:80px;">
						<el-option label="120" value="120"></el-option>
						<el-option label="240" value="240"></el-option>
						<el-option label="全部" value="1000000"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="">
					<el-select v-model="calcCnt" style="width:80px;">
						<el-option label="20" value="20"></el-option>
						<el-option label="30" value="30"></el-option>
						<el-option label="40" value="40"></el-option>
						<el-option label="60" value="40"></el-option>
						<el-option label="全部" value="1000000"></el-option>
					</el-select>
					<el-input v-model="endDate" style="width:90px;"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="success" size="mini" @click="getStock(listType)">缓存选股</el-button>
					<el-button type="primary" size="mini" @click="getStock(listType, true)">实时选股</el-button>
				</el-form-item>
			</el-form>
			<!-- 公式过滤器 -->
			<el-form :inline="true" size="mini">
				<!--el-form-item label="过滤">
                    <el-select v-model="stockFilter" filterable allow-create default-first-option>
                        <el-option v-for="(stockKey,index) in baseStockFilter" :key="index" :label="stockKey" :value="stockKey"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="stockFilter"></el-input>
                </el-form-item-->
				<el-form-item>
					<el-autocomplete class="inline-input" v-model="stockFilter" style="width:360px;"
									 :fetch-suggestions="queryStockFilter" placeholder="请输入过滤条件">
					</el-autocomplete>
				</el-form-item>
				<el-form-item>
					<el-button type="success" size="mini" @click="filter">过滤</el-button>
					<el-button type="primary" size="mini" @click="clearFilter">清除过滤</el-button>
				</el-form-item>
			</el-form>
		</el-col>
	</el-row>
	<el-row>
		<el-col v-if="listType == 'parse'" :span="24">
			<el-form :inline="true" size="mini">
				<el-form-item label="主指标">
					<el-select v-model="checkColumnKey" filterable allow-create default-first-option>
						<el-option v-for="(col,index) in checkColumn" :key="index" :label="getName(col)" :value="col"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="回测天">
					<el-select v-model="prevDays" filterable allow-create default-first-option @change="parse">
						<el-option label="1" value="1"></el-option>
						<el-option label="3" value="3"></el-option>
						<el-option label="5" value="5"></el-option>
						<el-option label="10" value="10"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="">
					<el-checkbox-group v-model="checkColumn">
						<el-checkbox-button v-for="(col,index) in table.parseColumn" :key="index" :label="col">{{getName(col)}}</el-checkbox-button>
					</el-checkbox-group>
				</el-form-item>
			</el-form>
			<parallel :value="table.parseData" :column="checkColumn" :dimension="checkColumnKey" v-bind:selected.sync="table.selected"></parallel>
			<stock-table :key="'parse'" :value="table.parseData" :show="table.parseColumn" :more="expand" :select="table.selected">
				<template v-slot="props">
					<el-row v-if="props.row">
						<el-col :xl="24" :xs="24">
							<el-card class="box-card">
								<stock-chart :value="props.row"></stock-chart>
							</el-card>
						</el-col>
						<el-col :xl="24" :xs="24">
							<stock-table :key="'detail'" :value="props.row.dataReverse" :show="table.column"></stock-table>
						</el-col>
					</el-row>
				</template>
			</stock-table>
		</el-col>
		<el-col v-if="listType != 'parse'" :span="24">
			<stock-table :key="'data'" :value="table.data" :show="table.showColumn" :more="expand" :select="table.selected">
				<template v-slot="props">
					<el-row v-if="props.row">
						<el-col :xl="24" :xs="24">
							<!--chart v-model="props.row"></chart-->
							<el-card class="box-card">
								<stock-chart :value="props.row"></stock-chart>
							</el-card>
						</el-col>
						<el-col :xl="24" :xs="24">
							<stock-table :key="'detail'" :value="props.row.dataReverse" :show="table.column"></stock-table>
						</el-col>
					</el-row>
				</template>
			</stock-table>
		</el-col>
	</el-row>
</div>
</body>
<style>
	body {
		display: block;
		box-sizing: border-box;
		margin: 0px;
		padding: 0px;
	}
	.el-table__expanded-cell[class*=cell] {
		padding: 10px;
	}
	.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
		margin-bottom: 5px;
	}
	.el-table--mini td, .el-table--mini th {
		padding: 0px 0;
	}
	.el-tabs__header {
		margin: 0 0 5px 5px;
	}
	.el-table .cell {
		padding-right: 5px;
	}
	.el-table .cell, .el-table--border td:first-child .cell, .el-table--border th:first-child .cell {
		padding-left: 5px;
	}
	.el-form{
		margin: 0 5px ;
	}
</style>
<script>
	var rootVm = new Vue({
		el: '#app',
		data: function () {
			return {
				listType: "user",
				listLength: 0,
				parallel: false,
				checkColumn: [],
				checkColumnKey: "",
				prevDays: 1,
				prevCheckColumn: [],
				stockList: BASE_STOCK[0],
				baseStockList: BASE_STOCK,
				stockFilter: BASE_FILTER[0],
				baseStockFilter: BASE_FILTER,
				factorList: FACTOR,
				period: "101",
				dataLimit: "120",
				calcCnt: "20",
				endDate: "20500101",
				filterFunc: "",
				currentPage: 1,
				useFactor: [],
				table: {
					data: [],
					parseData: [],
					column: [],
					showColumn: [],
					parseColumn: [],
					selected: []
				}
			}
		},
		methods: {
			getName : function (key) {
				return COLUMN_NAME[key] || key;
			},
			getStock: function (type, real) {
				var vm = this;
				var table = this.table;
				var period = this.period;
				var dataLimit = this.dataLimit;
				var endDate = this.endDate;
				var calcCnt = parseInt(this.calcCnt);
				var out = [];
				var parseOut = [];
				var list;
				if ("user" == type) {
					// 自选列表
					list = DB.getTable("user");
				}
				else {
					list = fetchStockList(this.stockList);
				}
				list.then(function (list) {
					Vue.set(table, "column", getColumn());
					Vue.set(table, "showColumn", getColumn("show"));
					Vue.set(vm, "prevCheckColumn", getColumn("check"));
					Vue.set(vm, "listLength", list.length);

					for (var i = 0; i < list.length; i++) {
						var s = getStockData(list[i], period, dataLimit, endDate, real);
						s.then(function (arr) {
							arr.index = i;
							var d = formatData(arr, null, calcCnt, vm.prevDays, vm.prevDays);
							out.push(d[d.length-1]);
							Vue.set(table, "data", out);
						})
					}
				});
			},
			expand: function (row, exp) {
				row.currentPage = 1;
				row.dataReverse = formatData(row, null, row.data.length);
				row.dataReverse.reverse();
			},
			parse: function (tab) {
				if (null != tab.name) {
					if ("parse" != tab.name) {
						Vue.set(this.table, "selected", []);
						this.parallel = false;
						return;
					}
					if (this.parallel) {
						Vue.set(this.table, "selected", []);
						this.parallel = false;
						return;
					}
				}

				var parse = parseData(this.table.data, parseInt(this.prevDays), parseInt(this.calcCnt));
				DB.getTableRow("stock", 'checkColumn').then(function (col) {
					if (col.value && col.value.length > 0) {
						var arr = [];
						for (var i = 0; i < col.value.length; i++) {
							if (parse.column.includes(col.value[i])) {
								arr.push(col.value[i]);
							}
						}
						if (arr.length > 0) {
							Vue.set(rootVm, "checkColumn", arr);
						}
					}
				});
				Vue.set(this.table, "selected", []);
				Vue.set(this.table, "parseData", parse.data);
				Vue.set(this.table, "parseColumn", parse.column);
				this.parallel=true;
			},
			filter : function () {
				var all = getColumn();
				var filter = this.stockFilter;
				for (var i = 0; i < all.length; i++) {
					var key = all[i];
					var name = COLUMN_NAME[key];
					if (null == name) {
						continue;
					}
					filter = filter.replace(new RegExp("{"+name.replace(/[()]/g, "[()]")+"}", 'g'), "e." + key);
				}
				eval("function func(e){return " + filter + ";}");
				console.log(func);
				var arr = [];
				for (var i = 0; i < this.table.data.length; i++) {
					if (func(this.table.data[i])){
						arr.push(i);
					}
				}
				Vue.set(this.table, "selected", arr);
			},
			clearFilter : function () {
				Vue.set(this.table, "selected", []);
			},
			queryStockList : function (queryString, cb) {
				var arr = [];
				for (var i = 0; i < BASE_STOCK.length; i++) {
					arr.push({"value": BASE_STOCK[i]});
				}
				cb(arr);
			},
			queryStockFilter : function (queryString, cb) {
				var arr = [];
				for (var i = 0; i < BASE_FILTER.length; i++) {
					arr.push({"value": BASE_FILTER[i]});
				}
				cb(arr);
			},
		},
		watch: {
			checkColumn : function (n) {
				DB.setTableRow("stock", {id:'checkColumn',value:n});
			},
			'table.selected' : function (n) {
				console.log('table.selected', n);
			}
		}
	});
</script>
</html>